<template>
	<view>
		<view class="searchZone">
			<uni-search-bar @input="inputVal" bgColor="#fff" clearButton="auto" cancelButton="none" radius="100" focus="true" placeholder="请输入搜索内容">
				<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
			</uni-search-bar>
		</view>
		
		<view class="searchDataZone">
			<view @click="toGoodsDetailPage(item)" class="searchDataItem" v-for="(item,index) in searchResults" :key="item.goods_id">
				<view class="searchDataFont">{{ item.goods_name }}</view>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { searchDataGetService } from '../../api/search.js'
	
	const inputValue = ref('');//搜索框输入值
	const searchResults = ref([]);// 搜索结果列表
	let timer = null;
	//防抖: 使用延时器，在500毫秒内若多次输入值，则只取最后一次的值
	const inputVal = (e) => {
		clearTimeout(timer);
		timer = setTimeout(()=>{
			inputValue.value = e;
			let param = {
				query: inputValue.value	
			}
			getSearchData(param);
		},500);
	}
	
	const getSearchData = async (param) => {
		const {data:res} = await searchDataGetService(param);
		console.log(res);
		searchResults.value = res.message;
	}
	
	const toGoodsDetailPage = (item) => {
		uni.navigateTo({
			url: '/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
		})
	}
</script>

<style lang="scss">
.searchZone{
	background-color: #C00000;
	position: sticky;
	top: 0;
	z-index: 999;
}
.searchDataZone{
	.searchDataItem{
		background-color: #fff;
		border-bottom: 1px solid #f3f3f3;
		line-height: 50px;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.searchDataFont{
			color: "#000";
			font-size: 14px;
			// 文字不允许换行（单行文本）
			white-space: nowrap;
			// 溢出部分隐藏
			overflow: hidden;
			// 文本溢出后，使用 ... 代替
			text-overflow: ellipsis;
			margin-right: 3px;
		}
	}
}
</style>
